<template>
  <view class="content">
    <view class="headerImg">
      <!-- <image src="../../static/image/delivery/deliveryBg.png" mode="scaleToFill" /> -->
      <view class="headerBox" :style="'padding-top:' + statusBarHeight + 'px;'">
        <!-- <u-navbar :is-back="false" :background="none"></u-navbar> -->
       <view class="headerInput">
          <view @tap="address" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom: 12rpx;flex: 1;">
            <image style="height:32rpx; width:32rpx; margin-right:4rpx;vertical-align: middle;" src="../../static/image/delivery/addressmap.png" alt="" />
            <text class="address">{{ addressData }}</text>
          </view>
          <view style="width: 48rpx; height: 48rpx;margin-left: 32rpx;"></view>
       </view>
        <view class="headerInput">
          <view class="searchBox" @tap="goDeliverySearch">
            <u-search :disabled="true" style="flex: 1;" placeholder="请输入内容" :show-action="false" :height="66"
              class="searchInput" input-align="left"></u-search>
            <button type="button" class="search">搜索</button>
          </view>
          <view  hover-class="none" hover-stop-propagation="false"
            style="margin-left: 16rpx; position:relative;" @tap="goNotice">
            <image style="width: 48rpx; height: 48rpx;" class="" src="../../static/image/pagesDelivery/Bell.png"
              mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="">
            </image>
            <view v-if="this.unread > 0"
              style="width:12rpx; height:12rpx; background-color:red;position:absolute; top:10rpx;left:30rpx; border-radius:50%;">
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="swiper">
      <u-swiper mode="none" @tap="gotoswiper" :height="360" :list="swiperList" name="imgUrl"></u-swiper>
    </view>
    <view class="classifyBox"> 
      <view class="classify" v-for="(item, index) in list" :key="index" @tap="searchInfo(item)">
        <!-- <view class="classifyImg"> -->
          <image  :src="item.merchantSmallImg" style="width: 98rpx;height: 98rpx;" mode="widthFix"></image>
        <!-- </view> -->
        <text class="className">{{ item.merchantSmallName }}</text>
      </view>
    </view>
    <!-- 加盟 -->
  <!-- <view style="padding: 0 32rpx;">
    <image
      src="../../static/image/delivery/recruit2.png"
      @tap="deliveryRecruit"
      mode="widthFix"
      style="width: 100%; margin-bottom: 20rpx;border-radius: 8rpx;"
    />
  </view> -->
    <view class="Index">
      <!-- 瀑布流布局列表 -->
      <view class="pubuBox">
        <view class="pubuItem">
          <view class="item-masonry" v-for="(item, index) in comList" :key="index" @tap="goDeliveryDetail(item)">
            <view class="masonry">
              <view v-if="item.businessStatus == 1 || item.isInOpenTime == 0" class="Work">
                店铺已打烊
              </view>
              <u-lazy-load threshold="-100" border-radius="10" :image="item.merchantHead" :index="index"></u-lazy-load>
            </view>
            <view class="listtitle">
              <view class="listtitle1">{{ item.merchantName }}</view>
              <view class="listtitle3">
                <view>
                  <text class="price">起送费￥{{ item.merchantDelivery }}</text>
                </view>
                <view>
                  <text v-if="item.distance < 1" class="distance">约{{ (item.distance * 1000).toFixed(2) }}m</text>
                  <text v-if="item.distance > 1" class="distance">约{{ item.distance.toFixed(2) }}km</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { selectMerchantList } from '@/api/common'
import { selectLabelList, updateUserMesread, getUserNotReadCount,getCarouselImage } from '@/api/delivery'
let that = this
export default {
  data() {
    return {
      list: [],
      comList: [], //商品列表
      statusBarHeight: 0, // 系统导航栏
      addressData: '',
      addshow: true,
      fValue: [],
      latAndLong: {},
      pageNum: 1,
      pageSize: 10,
      pagesStatus: false,
      someaddress: [],
      consigneeLng: '',
      consigneeLat: '',
      unread: 0,
      swiperList: [],
      a:[]
    }
  },
  onReady() {
  },
  onLoad() {
    this.swiperImage()
    that = this
    // 获取系统导航栏
    uni.getSystemInfo({
      success: function (info) {
        // iOS下，导航栏高度为44，状态栏高度为20
        let statusBarHeight = info.statusBarHeight;
        statusBarHeight = statusBarHeight + 15
        uni.setStorageSync('statusBarHeight', statusBarHeight)
        uni.setStorageSync('platform', info.platform)
      }
    });
    that.statusBarHeight = uni.getStorageSync('statusBarHeight')
    console.log('导航栏高度', that.statusBarHeight)
    // that.getList()
    that.latAndLong = uni.getStorageSync('latAndLong')
    console.log('当前经纬度', that.latAndLong)
    let nowAddress = uni.getStorageSync('address')
    console.log('当前地址', nowAddress)
    that.addressData = nowAddress.district
    that.consigneeLng = that.latAndLong.longitude
    that.consigneeLat = that.latAndLong.latitude
    this.pageNum = 1
    this.pagesStatus = false
  },
  onShow() {
    that = this
    this.gettabs()
    if(uni.getStorageSync('token')){
      this.examine()
    }
    that.latAndLong = uni.getStorageSync('latAndLong')
    that.consigneeLng = that.latAndLong.longitude
    that.consigneeLat = that.latAndLong.latitude
    let nowAddress = uni.getStorageSync('address')
    that.addressData = nowAddress.district.split(' ')[0]
    this.pageNum = 1
    this.pagesStatus = false
  },
  methods: {
    swiperImage() {
      let obj = {
        state: 1
      }
      getCarouselImage(obj.state).then(res=>{
        console.log('轮播图',res);
        this.swiperList = res.data
      })
    },
    gotoswiper(){
      uni.navigateTo({
        url:'/pagesDelivery/onboardingForm'
      })
    },
    deliveryRecruit() {
      uni.navigateTo({
        url:"/pagesDelivery/deliveryRecruit"
      })
    },
    //查未读
    examine() {
      getUserNotReadCount().then(res => {
        console.log('未读消息', res)
        this.unread = res.data
      })
    },
    goNotice() {
      updateUserMesread().then(res => {
        console.log('消息已读', res)
        uni.navigateTo({
          url: '/pagesDelivery/notice'
        })
      })

    },
    goDeliverySearch() {
      uni.navigateTo({
        url: '/pagesDelivery/deliverySearch?latAndLong=' + JSON.stringify(that.latAndLong) + '&merchantTakeout=1'
      })
    },
    goDeliveryDetail(e) {
      console.log('点击',e)
      uni.navigateTo({
        url: '/pagesDelivery/deliveryDetail?detailid=' + e.merchantId + '&distance=' + e.distance
      })

    },
    //瀑布流接口
    gitWaterfall() {
      let obj = {
        merchantTakeout: 1,
        lng: this.consigneeLng,
        lat: this.consigneeLat,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      console.log("请求", obj);
      selectMerchantList(obj).then(res => {
        console.log('物资配送列表', res.data.length)
        if (this.pageNum === 1) {
          this.comList = res.data
          console.log('物资配送列表数据', this.comList)
        } else {
          this.comList = this.comList.concat(res.data)
        }
        if (res.data.length < 10) {
          this.pagesStatus = false
        } else {
          this.pagesStatus = true
        }
      })
    },
    //商品分类接口
    gettabs() {
      let obj = {
        merchantTakeout: 1,
      }
      selectLabelList(obj).then(res => {
        console.log('商品分类', res)
        this.list = res.data
        this.gitWaterfall()
      })
    },
    searchInfo(e) {
      console.log('看看e是什么',e)

      uni.navigateTo({
        url: '/pagesDelivery/deliverySearchResult?latAndLong=' + JSON.stringify(this.latAndLong) + '&tabbarId=' + e.merchantTypeId + '&merchantTakeout=1'
      })
    },
    address() {
      let that = this
      uni.$once("nextStep", function (e) {
        console.log('看看信息', e)
        that.consigneeLng = e[0].consigneeLng
        console.log('看看经度', that.consigneeLng)
        that.consigneeLat = e[0].consigneeLat
        console.log('看看维度', that.consigneeLat)
        that.addressData = e[0].consigneeAddress
        console.log('看看地址', that.addressData)
        let obj = uni.getStorageSync('address')
        let onjand = uni.getStorageSync('latAndLong')
        onjand.longitude = that.consigneeLng
        onjand.latitude = that.consigneeLat
        obj.district = that.addressData
        console.log('看看地址', obj)
        uni.setStorageSync('address', obj)
        uni.setStorageSync('latAndLong', onjand)
        that.pageNum = 1
        that.pagesStatus = false
        that.gitWaterfall()
      });
      uni.navigateTo({
        url: '/pagesMine/mineAddress'
      })
    },
  },
  onReachBottom() {
    console.log("触底", this.pagesStatus);
    // 模拟的请求数据
    if (this.pagesStatus) {
      this.pageNum++
      this.gitWaterfall()
    }
  },
}
</script>

<style scoped lang="scss">
.content {
  ::v-deep .u-navbar::after {
    display: none !important;
  }
  background-color: #F5F5F5;
  min-height: 100vh;
  .headerImg {
    width: 100vw;
    display: flex;

    .headerBox {
      width: 100%;
      padding: 18rpx 34rpx;
      background-color: white;
    }
    .headerInput {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .searchBox {
        flex: 1;
        // margin-left: 24rpx;
        background: #EBEBEB;
        display: flex;
        align-items: center;
        border-radius: 84rpx;
      }

      ::v-deep .searchInput .u-content {
        background-color: #EBEBEB !important;
        padding-right: 0 !important;
      }
      ::v-deep .searchInput .u-icon-wrap {
        display: none !important;
      }
      ::v-deep .searchInput .u-input {
        background-color: #EBEBEB !important;
      }

      .address {
        font-family: PingFang SC, PingFang SC;
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
      }
      .search {
        width: 120rpx;
        height: 56rpx;
        border: none;
        outline: none;
        text-align: center;
        line-height: 56rpx;
        font-size: 28rpx;
        background-color: #D12C25;
        color: white;
        border-radius: 28rpx;
        margin: 0 8rpx;
      }
    }
  }
  .swiper{
      height: 100%;
      margin: 16rpx 32rpx;
  }
  .classifyBox {
    margin: 16rpx 34rpx;
    height: 216rpx;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 24rpx;
    border-radius:8rpx;
    .classify {
      width: 112rpx;
      height: 136rpx;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .classifyImg {
        width: 96rpx;
        height: 96rpx;
      }

      .className {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
        line-height: 33rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-top: 12rpx;
      }
    }
  }
  //瀑布流
  page {
    background-color: #F5F5F5;
    height: 100%;
  }
  .pubuBox {
    padding: 0 32rpx 32rpx;
  }
  .pubuItem {
    column-count: 2;
    column-gap: 20rpx;
  }
  .item-masonry {
    box-sizing: border-box;
    border-radius: 8rpx;
    overflow: hidden;
    background-color: #fff;
    break-inside: avoid;
    /*避免在元素内部插入分页符*/
    box-sizing: border-box;
    margin-bottom: 20rpx;
    .masonry {
      position: relative;
      .Work {
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99999;
        color: #ccc;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 35rpx;
        font-weight: bold;
      }
    }
  }

  .item-masonry image {
    width: 100%;
  }

  .listtitle {
    padding: 24rpx;
    font-size: 24rpx;

    .listtitle1 {
      line-height: 39rpx;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      min-height: 39rpx;
      max-height: 78rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #1A1A1A;
      line-height: 38rpx;
      font-style: normal;
    }

    .listtitle2 {
      height: 40rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #1A1A1A;
      line-height: 33rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-top: 12rpx;
      display: flex;
      justify-content: space-between;

      image {
        width: 12rpx;
        height: 20rpx;

      }

      .Distribution {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #1A1A1A;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
      }

      .distance {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #A1A2B2;
        line-height: 33rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-left: 8rpx;
      }
    }

    // .appraise {
    // 	display: flex;
    // 	height: 28rpx;
    // 	border-radius: 0rpx 0rpx 0rpx 0rpx;
    // 	margin-top: 12rpx;
    // 	.acclaimTag {
    // 		padding: 0 8rpx;
    // 		height: 28rpx;
    // 		line-height: 28rpx;
    // 		font-family: PingFang SC, PingFang SC;
    // 		border-radius: 18rpx;
    // 		font-weight: 400;
    // 		font-size: 20rpx;
    // 		text-align: center;
    // 		font-style: normal;
    // 	}

    // 	.acclaim1 {
    // 		background: rgba(255, 0, 0, 0.1);
    // 		color: #FF0000;
    // 	}

    // 	.acclaim2 {
    // 		background: rgba(0, 87, 255, 0.1);
    // 		color: #0057FF;
    // 	}

    // 	.acclaim3 {
    // 		width: 76rpx;
    // 		height: 28rpx;
    // 		font-family: PingFang SC, PingFang SC;
    // 		font-weight: 400;
    // 		font-size: 20rpx;
    // 		color: #16D356;
    // 		line-height: 28rpx;
    // 		text-align: center;
    // 		font-style: normal;
    // 		background: rgba(22, 211, 86, 0.1);
    // 		border-radius: 18rpx;
    // 	}
    // }

    .listtitle3 {
      font-size: 28rpx;
      color: #909399;
      margin-top: 12rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
      font-style: normal;
      display: flex;
      justify-content: space-between;
    }
  }

  .Index {
    width: 100%;
    height: 100%;
  }
}

::v-deep .u-lazy-item {
  max-height: 488rpx !important;
}
</style>
